<template>
  <el-popover ref="popover" v-model="ShowFilter" @show="show" title="" placement="bottom" width="650">
    <div>
      <el-form ref="formdata" :show-message="false" label-suffix="：" :validate-on-rule-change="false"
        label-width="100px" style="width: 100%;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务机构">
              <Fwjg v-model="filter_cx.dm" @change="fwjgChange" style="width:  100%"></Fwjg>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目分类">
              <el-cascader ref="flcascader" v-model="filter_cx.flid" style="width: 100%;" :options="xmfl_options"
                @change="flidChange" clearable :props="{checkStrictly:true  }"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单编号">
              <el-input v-model="filter_cx.fwbh" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务项目">
              <el-input v-model="filter_cx.fwxm" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务对象">
              <el-input v-model="filter_cx.fwdx" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="filter_cx.dxdh" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <el-input v-model="filter_cx.dxzh" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务区域">
              <el-cascader ref="qycascader" v-model="filter_cx.qyid" style="width: 100%;" :options="qy_options"
                @change="qyChange" clearable :props="{checkStrictly:true  }"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭地址">
              <el-input v-model="filter_cx.dxdz" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务人员">
              <el-input v-model="filter_cx.fwry" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员电话">
              <el-input v-model="filter_cx.fwdh" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订单状态">
              <el-select style="width: 100%" multiple v-model="filter_cx.ddzt" filterable allow-create clearable
                placeholder="">
                <el-option :label="item.label" :value="item.label" v-for="(item, index) in dict.type.user_jcsjgl_ddzt"
                  :key="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单时间">
              <el-date-picker v-model="filter_cx.cjrq" type="daterange" style="width: 100%;"
                value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务时间">
              <el-date-picker v-model="filter_cx.fwrq" type="daterange" style="width: 100%;"
                value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </el-form>
      <div class="flex-between">
        <div>
        </div>
        <div>
          <el-button type="primary" @click="cx">高级筛选</el-button>
          <el-button @click="closeDialog">关 闭</el-button>
        </div>
      </div>
    </div>
    <el-link slot="reference" class="ml5" type="primary">高级筛选</el-link>
  </el-popover>
</template>

<script>
  import {
    GetXmfl,
    Get_Region
  } from '@/api/pubmk/zdlb';
  export default {
    name: 'AdvFilter',
    props: {
      filter: {
        type: Object,
        default: () => {
          return {};
        }
      },
      cxlb: {
        type: String,
        default: () => {
          return '';
        }
      }

    },
    dicts: ['user_jcsjgl_ddzt'],
    created() {
      this.get_xtzd();
    },
    data() {
      return {
        ShowFilter: false,
        filter_cx: {
          dm: '',
          flid: [],
          fwbh: '',
          flmc: '',
          fwxm: '',
          dxxm: '',
          dxdh: '',
          dxzh: '',
          dx_qyid: [],
          dxqy: '',
          dxdz: '',
          fwry: '',
          fwdh: '',
          ddzt: [],
          cjrq: [],
          fwrq: []
        },
        xmfl_options: [],
        qy_options: [],
      };
    },
    methods: {
      qyChange() {
        const checkedNodes = this.$refs.qycascader.getCheckedNodes();
        const pathLabels = checkedNodes[0].pathLabels;
        this.filter_cx.dxqy = pathLabels.join("/");
      },
      fwjgChange() {
        if (this.filter_cx.dm == '') {
          this.xmfl_options = [];
        } else {
          this.get_xmfl();
        }

      },
      get_xmfl() {
        // this.filter_cx.flid = "";
        // this.filter_cx.flmc = "";
        const Parmas = {
          dm: this.filter_cx.dm
        }
        GetXmfl(Parmas).then(response => {
          this.xmfl_options = response.data;
        });
      },
      flidChange(e) {
        const checkedNodes = this.$refs.flcascader.getCheckedNodes();
        const pathLabels = checkedNodes[0].pathLabels;
        this.filter_cx.flmc = pathLabels.join("/");
      },
      get_xtzd() {
        const Parmas = {
          id: 182538,
          level: 3
        }
        Get_Region(Parmas).then(response => {
          this.qy_options = response.data;
        });
      },
      cx() {
        this.$emit('updatefilter', this.filter_cx);
        this.closeDialog();
      },
      closeDialog() {
        this.ShowFilter = false;
        this.$nextTick(() => {});
      },
      async show() {
        let urls = this.filter;
        this.filter_cx = {
          dm: '',
          flid: [],
          fwbh: '',
          flmc: '',
          fwxm: '',
          dxxm: '',
          dxdh: '',
          dxzh: '',
          dx_qyid: [],
          dxqy: '',
          dxdz: '',
          fwry: '',
          fwdh: '',
          ddzt: [],
          cjrq: [],
          fwrq: []
        };
        if (JSON.stringify(urls) == '{}') {} else {
          for (let key in urls) {
            if (this.filter_cx.hasOwnProperty(key)) {
              this.filter_cx[key] = urls[key];
            } else {
              this.filter_cx[key] = urls[key];
            }

          }
        }
        this.fwjgChange();
      }
    }
  };
</script>

<style scoped>
  .form-box {
    max-height: 500px;
    padding-right: 30px;
    overflow: auto;
  }
</style>
